
const canvas = document.getElementById('my-test');

const context = canvas.getContext('2d');
context.width = canvas.width = document.body.offsetWidth;
context.height = canvas.height = document.body.offsetHeight;

//声明三角形的点
let trianglePoint = [{ x: 75, y: 50 }, { x: 100, y: 75 }, { x: 100, y: 25 }];
let isDrog = false;
let graphs = {};//缓存图形,维护图形与颜色对应的color，当点击的时候使用配置,避免了去计算
const lineColor = '#aaaaaa';

initDraw(context, trianglePoint, true, 5, lineColor);

canvas.addEventListener('mousedown', (e) => {
  let pointX = e.clientX, pointY = e.clientY;
  // 需要判断是不是在三角形内部，所以使用颜色存储配置，如果有，说明点击的三角形内部
  let getHideColor = context.getImageData(pointX, pointY, 1, 1).data;
  const getHexColor = rgbToHex(getHideColor[0], getHideColor[1], getHideColor[2]);

  const grData = graphs[lineColor];

  if (!grData) return;

  console.log(getHideColor, getHexColor, pointX, pointY);
  isDrog = {
    x: pointX,
    y: pointY,
  };
  grData.color = 'red';
  const { points, isFill, lineWidth, color } = grData;
  drawGraph(context, points, isFill, lineWidth, color);
}, false);

canvas.addEventListener('mousemove', (e) => {
  if (!isDrog) {
    return;
  }
  let pointX = e.clientX, pointY = e.clientY;
  const movex = pointX - isDrog.x;
  const movey = pointY - isDrog.y;
  const grData = graphs[lineColor];

  const { points, isFill, lineWidth, color } = grData;

  const newPoints = points.map((point) => {
    return {
      x: point.x + movex,
      y: point.y + movey,
    };
  });
  grData.points = newPoints;
  isDrog = {
    x: pointX,
    y: pointY,
  };


  drawGraph(context, points, isFill, lineWidth, color);
});

canvas.addEventListener('mouseup', () => {
  if (!isDrog) {
    return;
  }
  isDrog = false;

  const grData = graphs[lineColor];
  grData.color = lineColor;
  const { points, isFill, lineWidth, color } = grData;
  drawGraph(context, points, isFill, lineWidth, color);
});


function initDraw(ctx, points, isFill, lineWidth, color) {
  graphs[color] = {
    points,
    isFill,
    color,
    lineWidth,
  }
  drawGraph(ctx, points, isFill, lineWidth, color);//绘制可视化的画布
}

function drawGraph(ctx, points, isFill, lineWidth, color) {
  drawSingleGraph(ctx, points, isFill, lineWidth, color);
}

function drawSingleGraph(ctx, points, isFill, lineWidth, color) {
  ctx.clearRect(0, 0, ctx.width, ctx.height); // 清理画布
  ctx.save() // 保存状态
  ctx.beginPath();
  color && (isFill ? ctx.fillStyle = color : ctx.strokeStyle = color);//判断是有颜色的情况，就设置颜色大小
  ctx.lineWidth = lineWidth;
  ctx.lineJoin = 'miter'; // 两条线交汇，角度方式 bevel:斜角， round：圆角，miter：尖角，默认
  ctx.miterLimit = 5; // 规定最大斜接长度
  points.forEach((point, index) => {
    if (!index) {
      ctx.moveTo(point.x, point.y)
    } else {
      ctx.lineTo(point.x, point.y);
    }
  });

  ctx.closePath();
  isFill ? ctx.fill() : ctx.stroke();//判断是否是填充
  ctx.restore();//恢复上一次的状态
}

//随机生成16位的颜色值
function getRandomColor() {
  return '#' + (function (color) {
      // console.log(arguments);
      return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)])
          && (color.length == 6) ? color : arguments.callee(color);
  })('');
}



function componentToHex(c) {
  var hex = c.toString(16);
  // 30..toString(16) // 1e
  return hex.length == 1 ? "0" + hex : hex;
}


function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}